<template>
  <div class="user-info-container">
    <v-list>
      <div class="user-header">
        <img src="../../images/head.jpg" @click="login" style="border-radius: 50%" height="60" width="60" slot="icon">
        <p>点击头像登录</p>
      </div>
      <v-list-tile @click="">
        <v-list-tile-action>
          <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>首页</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
      <v-list-tile @click="">
        <v-list-tile-action>
          <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>个人资料</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
      <v-list-tile @click="">
        <v-list-tile-action>
          <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>我的评论</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
      <v-list-tile @click="">
        <v-list-tile-action>
          <span class="glyphicon glyphicon-tag" aria-hidden="true"></span>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>我的收藏</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
      <v-list-tile @click="">
        <v-list-tile-action>
          <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>我看过的</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
      <v-list-tile @click="">
        <v-list-tile-action>
          <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>退出登录</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>
  </div>
</template>

<script>
    export default {
        data() {
            return {};
        },
        methods: {
            login() {
                this.$router.push({ name: 'login' });
            },
        },
    };
</script>

<style lang="scss" scoped>
  .user-info-container {
    .v-list {
      padding: 0;
    }
    .user-header {
      padding: 20px 10px;
      background-color: chartreuse;
    }
  }
</style>